From f111685c5886f3e77edfd3621c98d8ac1b9bcce4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 24 Nov 2023 20:00:08 +0100
Subject: refactor(services, types): reorganize GraphQL fetchers and data types

The Typescript mapped types was useful for autocompletion in fetchers
but their are harder to maintain. I think it's better to keep each
query close to its fetcher to have a better understanding of the
fetched data. So I:
* colocate queries with their own fetcher
* colocate mutations with their own mutator
* remove Typescript mapped types for queries and mutations
* move data convertors inside graphql services
* rename most of data types and fetchers
---
 src/pages/blog/page/[number].tsx | 77 ++++++++++++++++++++--------------------
 1 file changed, 38 insertions(+), 39 deletions(-)

(limited to 'src/pages/blog/page/[number].tsx')

diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index b254603..d6071d1 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -20,27 +20,28 @@ import {
   PageSidebar,
 } from '../../../components';
 import {
-  getArticles,
-  getArticlesEndCursor,
-  getThematicsPreview,
-  getTopicsPreview,
-  getTotalArticles,
-  getTotalThematics,
-  getTotalTopics,
+  convertTaxonomyToPageLink,
+  fetchLastPostCursor,
+  fetchPostsCount,
+  fetchPostsList,
+  fetchThematicsCount,
+  fetchThematicsList,
+  fetchTopicsCount,
+  fetchTopicsList,
 } from '../../../services/graphql';
 import type {
-  EdgesResponse,
+  GraphQLConnection,
   NextPageWithLayout,
-  RawArticle,
-  RawThematicPreview,
-  RawTopicPreview,
+  WPPostPreview,
+  WPThematicPreview,
+  WPTopicPreview,
 } from '../../../types';
 import { CONFIG } from '../../../utils/config';
 import { ROUTES } from '../../../utils/constants';
 import {
   getBlogSchema,
   getLinksItemData,
-  getPageLinkFromRawData,
+  getPostsWithUrl,
   getSchemaJson,
   getWebPageSchema,
 } from '../../../utils/helpers';
@@ -52,10 +53,10 @@ import {
 } from '../../../utils/hooks';
 
 type BlogPageProps = {
-  articles: EdgesResponse<RawArticle>;
   pageNumber: number;
-  thematicsList: RawThematicPreview[];
-  topicsList: RawTopicPreview[];
+  posts: GraphQLConnection<WPPostPreview>;
+  thematicsList: WPThematicPreview[];
+  topicsList: WPTopicPreview[];
   totalArticles: number;
   translation: Messages;
 };
@@ -64,8 +65,8 @@ type BlogPageProps = {
  * Blog index page.
  */
 const BlogPage: NextPageWithLayout<BlogPageProps> = ({
-  articles,
   pageNumber,
+  posts,
   thematicsList,
   topicsList,
   totalArticles,
@@ -75,9 +76,9 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     redirectTo: ROUTES.BLOG,
   });
 
-  const { posts } = usePostsList({
-    fallback: [articles],
-    fetcher: getArticles,
+  const { articles } = usePostsList({
+    fallback: [posts],
+    fetcher: fetchPostsList,
     perPage: CONFIG.postsPerPage,
   });
   const intl = useIntl();
@@ -195,6 +196,10 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     id: 'AXe1Iz',
   });
 
+  const blogPageArticles = articles?.flatMap((p) =>
+    p.edges.map((edge) => edge.node)
+  );
+
   return (
     <Page breadcrumbs={breadcrumbItems} isBodyLastChild>
       <Head>
@@ -225,7 +230,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         meta={{ total: totalArticles }}
       />
       <PageBody>
-        <PostsList posts={posts ?? []} sortByYear />
+        <PostsList posts={getPostsWithUrl(blogPageArticles ?? [])} sortByYear />
         <Pagination
           aria-label={paginationAriaLabel}
           current={pageNumber}
@@ -242,11 +247,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
               {thematicsListTitle}
             </Heading>
           }
-          items={getLinksItemData(
-            thematicsList.map((thematic) =>
-              getPageLinkFromRawData(thematic, 'thematic')
-            )
-          )}
+          items={getLinksItemData(thematicsList.map(convertTaxonomyToPageLink))}
         />
         <LinksWidget
           heading={
@@ -254,9 +255,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
               {topicsListTitle}
             </Heading>
           }
-          items={getLinksItemData(
-            topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
-          )}
+          items={getLinksItemData(topicsList.map(convertTaxonomyToPageLink))}
         />
       </PageSidebar>
     </Page>
@@ -274,23 +273,23 @@ export const getStaticProps: GetStaticProps<BlogPageProps> = async ({
   params,
 }) => {
   const pageNumber = Number((params as BlogPageParams).number);
-  const lastCursor = await getArticlesEndCursor({
-    first: CONFIG.postsPerPage * pageNumber,
-  });
-  const articles = await getArticles({
+  const lastCursor = await fetchLastPostCursor(
+    CONFIG.postsPerPage * pageNumber
+  );
+  const posts = await fetchPostsList({
     first: CONFIG.postsPerPage,
     after: lastCursor,
   });
-  const totalArticles = await getTotalArticles();
-  const totalThematics = await getTotalThematics();
-  const thematics = await getThematicsPreview({ first: totalThematics });
-  const totalTopics = await getTotalTopics();
-  const topics = await getTopicsPreview({ first: totalTopics });
+  const totalArticles = await fetchPostsCount();
+  const totalThematics = await fetchThematicsCount();
+  const thematics = await fetchThematicsList({ first: totalThematics });
+  const totalTopics = await fetchTopicsCount();
+  const topics = await fetchTopicsList({ first: totalTopics });
   const translation = await loadTranslation(locale);
 
   return {
     props: {
-      articles: JSON.parse(JSON.stringify(articles)),
+      posts: JSON.parse(JSON.stringify(posts)),
       pageNumber,
       thematicsList: thematics.edges.map((edge) => edge.node),
       topicsList: topics.edges.map((edge) => edge.node),
@@ -301,7 +300,7 @@ export const getStaticProps: GetStaticProps<BlogPageProps> = async ({
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const totalArticles = await getTotalArticles();
+  const totalArticles = await fetchPostsCount();
   const totalPages = Math.ceil(totalArticles / CONFIG.postsPerPage);
   const pagesArray = Array.from(
     { length: totalPages },
-- 
cgit v1.2.3

